<template>
  <div class="recharge">
    <el-dialog title="充值" :visible.sync="isShow" center  :before-close="close">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-position="left" label-width="120px">
        <el-form-item label="充值金额" prop="money">
          <el-input v-model="form.money" autocomplete="off" placeholder="最低充值10000元"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" >
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submint">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {

  data () {
    var validateMoney = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入充值金额'));
      } else if (!(/^(([1-9]\d*)|\d)(\.\d{1,2})?$/.test(value))) {
        callback(new Error('请输入正确的金额'));
      } else if (value < 10000) {
        callback(new Error('最低10000元起充'));
      } else {
        callback();
      }
    }
    return {
      isShow: false,
      form: {
        money: ''
      },
      rules: {
        money: [
          { required: true, validator: validateMoney, trigger: 'change' }
        ]
      },
      id: null
    }
  },
  methods: {
    show(data) {
      this.isShow = true
      // this.id = data.id
    },
    submint() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$router.replace({
            name: 'payment',
            query: {
              type: 'recharge',
              money: btoa(this.form.money),
              from: this.$route.path
            }
          })
        } else {
          return false;
        }
      })
    },

    close() {
      this.$refs['ruleForm'].resetFields()
      this.isShow = false
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .recharge {
    .el-dialog {
      max-width: 500px;
    }
  }
</style>
